import React, { useEffect, useState } from 'react'
import style from './createEmployee.module.scss'
import { IEmployee, IProjectManager } from '../../../starter/model/interfaces'
import { DatePicker, Input, Radio } from 'antd'
import customParseFormat from 'dayjs/plugin/customParseFormat'
import { useActions } from '../../../starter/hooks/actions'
import { useAppSelector } from '../../../starter/hooks/redux'
import dayjs, { Dayjs } from 'dayjs'
import { ActionCreatorWithPayload } from '@reduxjs/toolkit'

dayjs.extend(customParseFormat)


type TCreateEmployee = {
  type: 'employee' | 'projectManager'
}
type TBase = {
  person: IEmployee | IProjectManager
  action: ActionCreatorWithPayload<IEmployee, 'tmp/setTmpEmployee'> | ActionCreatorWithPayload<IProjectManager, 'tmp/setTmpProjectManager'>
}

export default function CreateEmployee({ type }: TCreateEmployee) {

  const {setTmpEmployee, setTmpProjectManager} = useActions()
  const { employee, projectManager } = useAppSelector(state => state.tmp)
  const [base, setBase] = useState<TBase>({person: employee, action: setTmpEmployee})

  useEffect(() => {
    if (type === 'employee') {
      setBase({
        person: employee,
        action: setTmpEmployee
      })
    }
    if (type === 'projectManager') {
      setBase({
        person: projectManager,
        action: setTmpProjectManager
      })
    }
  }, [type])

  useEffect(() => {
    if (type === 'employee') {
      setBase((prev) => {
        return ({
          ...prev,
          person: employee
        })
      })
    }
    if (type === 'projectManager') {
      setBase((prev) => {
        return ({
          ...prev,
          person: projectManager
        })
      })
    }
  }, [employee, projectManager])


  const handleInputChange = (evt: any): void => {
    if (evt.target) {
      const { name, value } = evt.target
      base.action({
        ...base.person,
        [name]: value,
      })
    }
  }

  const handleInputChangeDate = (name: string, date: Dayjs, dateString: string | string[]): void => {
    base.action({
      ...base.person,
      [name]: date.toDate(),
    })
  }

  return (
    <div className={style.wrapper}>
      <label className={style.inputLabel}>
        Имя
        <Input
          className={style.input}
          name='firstName'
          placeholder='Имя'
          value={base.person.firstName}
          onChange={handleInputChange}
        />
        {/*<span className={`${formErrors.name ? 'register__input-error' : ''}`}>{formErrors.name}</span>*/}
      </label>
      <label className={style.inputLabel}>
        Фамилия
        <Input
          className={style.input}
          name='lastName'
          value={base.person.lastName}
          onChange={handleInputChange}
        />
        {/*<span className={`${formErrors.name ? 'register__input-error' : ''}`}>{formErrors.name}</span>*/}
      </label>
      <label className={style.inputLabel}>
        Отчество
        <Input
          className={style.input}
          name='middleName'
          value={base.person.middleName}
          onChange={handleInputChange}
        />
        {/*<span className={`${formErrors.name ? 'register__input-error' : ''}`}>{formErrors.name}</span>*/}
      </label>
      <label className={style.inputLabel}>
        День рождения
        <br/>
        <DatePicker
          style={{margin: '0.5rem 0'}}
          name='birthDay'
          value={base.person.birthDay && dayjs(base.person.birthDay)}
          onChange={(date, dateString) => { handleInputChangeDate('birthDay', date, dateString) }}
        />
        {/*<span className={`${formErrors.name ? 'register__input-error' : ''}`}>{formErrors.name}</span>*/}
      </label>
      <br/>
      <label className={style.inputLabel}>
        <Radio.Group style={{margin: '0.5rem 0'}} name='sex' value={base.person.sex} onChange={handleInputChange}>
          <Radio.Button value="male">Муж</Radio.Button>
          <Radio.Button value="female">Жен</Radio.Button>
        </Radio.Group>

        {/*<span className={`${formErrors.name ? 'register__input-error' : ''}`}>{formErrors.name}</span>*/}
      </label>
      <br/>
      <label className={style.inputLabel}>
        email
        <Input
          className={style.input}
          name='email'
          value={base.person.email}
          onChange={handleInputChange}
        />
        {/*<span className={`${formErrors.name ? 'register__input-error' : ''}`}>{formErrors.name}</span>*/}
      </label>
      <label className={style.inputLabel}>
        Телефон
        <Input
          name='phone'
          value={base.person.phone}
          onChange={handleInputChange}
        />
        {/*<span className={`${formErrors.name ? 'register__input-error' : ''}`}>{formErrors.name}</span>*/}
      </label>
      <label className={style.inputLabel}>
        Телеграм
        <Input
          className={style.input}
          name='telegram'
          value={base.person.telegram}
          onChange={handleInputChange}
        />
        {/*<span className={`${formErrors.name ? 'register__input-error' : ''}`}>{formErrors.name}</span>*/}
      </label>
    </div>
  )
}
